<template>
    <orh-table :hideTitle="hideTitle">
        <div slot="option">
            <current-term @on-formstate="formState" style="width:200px" ></current-term>
            <Button type="primary" style="margin-left: 10px;" :loading="allloading" @click="exportData('all')" v-button="'allteacherleave_export'" size="small">按学期导出</Button>
            <Button type="primary" style="margin-left: 10px;" :loading="dayloading" @click="exportData('day')" v-button="'allteacherleavesame_export'" size="small">按时间段导出</Button>
            <Button type="primary" style="margin-left: 10px;" :loading="monloading" @click="exportData('mon')" v-button="'allteacherleavemonth_export'" size="small">按月份导出</Button>
        </div>
        <Modal v-model="lookupState" slot="others">
			<p slot="header"><span>请选择时间段</span></p>
			<div style="text-align:center">
				<DatePicker type="daterange" v-if="lookupState" @on-change="seltime" placeholder="选择时间段" style="width: 200px"></DatePicker>
			</div>
			<div slot="footer">
				<Button type="primary" :loading="timeloading" @click="lookupSubmit">确定</Button>
				<Button @click="cancel('time')">取消</Button>
			</div>
		</Modal>
        <Modal v-model="lookupStates" slot="others">
			<p slot="header"><span>请选择月份</span></p>
			<div style="text-align:center">
                <DatePicker type="month" placeholder="选择月份" @on-change="seltimes"></DatePicker>
			</div>
			<div slot="footer">
				<Button type="primary" :loading="timeloading" @click="lookupSubmits">确定</Button>
				<Button @click="cancel('month')">取消</Button>
			</div>
		</Modal>
        <div slot="table">
            <div>
                <Row><i-col span="24"><Card><h4>请假总人数：{{total}}人</h4></Card></i-col></Row>
                <echarts :option="option"  style="width100%;height:420px;" v-if="GradeList.length!=0"></echarts>
                <Spin size="large" fix v-if="tableload"></Spin>
            </div>
            <Table :columns="columns1" :loading="tableload" :data="GradeList"></Table>
            <Modal v-model="modal2" width="900">
                <p slot="header" style="color:#f60;text-align:center"><span>{{title}}</span></p>
                <div style="text-align:center">
                    <Table :columns="columnsxq" :loading="tableloadxq" :data="GradeListxq"></Table>
                </div>
                <div slot="footer"><Button type="primary" long @click="del">关闭</Button></div>
            </Modal>
        </div>
    </orh-table>
</template>
<script>
export default {
    props: {
        hideTitle: {
            type: Boolean,
            default: true
        }
    },
    components: {
        CurrentTerm: resolve=> require(['&/Authpub/CurrentTerm.vue'],resolve),
        Echarts: () => import("&/Public/Echarts").then(m => m.default || m)
    },
    name: 'leave-teacherleavestatistics',
    data () {
        return {
            lookupStates:false,
            start_time:'',
            end_time:'',
            timeloading:false,
            lookupState:false,
            allloading:false,
            dayloading:false,
            monloading:false,
            allid:null,
            modal2: false,
            tableloadxq:false,
            GradeListxq:[],
            title:null,
            total:null,
            listUrl:'api/leave/v1/leave_statistics/teacher_leave_statistics',
            exportUrl:'',
            tableload:false,
            GradeList:[],
            columnsxq:[
                    {
                        title: '序号',
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    // {
                    //     title: '请假种类',
                    //     align: 'center',
                    //     width:90,
                    //     render: (h, params) => {
                    //         return h('div', params.row.teacher_leave_kinds.length!= 0?params.row.teacher_leave_kinds[0].dictionary_name.zh:'');
                    //     }
                    // },
                    {
                        title: '请假开始时间',
                        align: 'center',
                        key:'start_time',
                        width:170,
                    },
                    {
                        title: '请假结束时间',
                        align: 'center',
                        key:'end_time',
                        width:170,
                    },
                    {
                        title: '请假天数',
                        align: 'center',
                        key:'leave_days',
                        width:90,
                    },
                    {
                        title: '是否调课',
                        align: 'center',
                        width:90,
                        render: (h, params) => {
                            return h('div', [
                                h('div',params.row.whether_class == '1'?'是':'否')
                            ]);
                        }
                    },
                    {
                        title: '请假原因',
                        align: 'center',
                        render:(h,params)=>{
                            let name = params.row.teacher_leave_reason.zh?params.row.teacher_leave_reason.zh:params.row.teacher_leave_reason.mn;
                            return h('div',name)
                        }
                    },
                ],
                columns1: [
                    {
                        title: '序号',
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '教师姓名',
                        render:(h,params)=> {
                        return h('span',params.row.teacher_name?params.row.teacher_name.zh?params.row.teacher_name.zh:params.row.teacher_name.mn:'')
                    },
                        align: 'center'
                    },
                    {
                        title: '请假数量',
                        key: 'leave_count',
                        sortable: true,
                        align: 'center',
                        sortType:'desc'
                    },
                    {
                        title: '请假种类',
                        align: 'center',
                        render: (h, parmes) => {
                            if(parmes.row.leave_kind.length!=0){
                                let arr = parmes.row.leave_kind
                                let name = ''
                                arr.forEach((item,num) => {
                                    if (num != 0) {
                                        name += `,${item.dictionary_name.zh}(${item.count}次,共计${item.days}天)`
                                    }else{
                                        name += `${item.dictionary_name.zh}(${item.count}次,共计${item.days}天)`
                                    }
                                })
                                return h('div', name)
                            }else{
                                return h('div', '暂无数据')
                            }
                        }
                    },
                    {
                        title: '请假天数',
                        key: 'leave_day',
                        sortable: true,
                        sortType:'desc',
                        align: 'center',
                    },
                    {
                        title: '扣钱数',
                        key: 'money',
                    },
                    {
                        title: '扣分数',
                        key: 'points',
                        align: 'center',
                    },
                    {
                        title: ' ',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                            this.look(params.row)
                                        }
                                    }
                                }, '查看'),
                            ]);
                        }
                    },
                ],
            option: {
                color: ['#1c2438', '#495060'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['请假数量', '请假天数']
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar', ]},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        show: false,
                        axisTick: {show: false},
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '请假数量',
                        type: 'bar',
                        barGap: 0,
                        data: []
                    },
                    {
                        name: '请假天数',
                        type: 'bar',
                        barGap: 0,
                        data: []
                    },
                ]
            },
        }
    },
        methods: {
            /************************************************************
            * 获取全部教师请假统计数据
            ************************************************************/
            queryData(){
                this.tableload = true
                this.$http.get(this.listUrl).then(val=>{
                    let xAxis=[]
                    let yAxis1=[]
                    let yAxis2=[]
                    if(val.data.length!=0){
                        this.GradeList=val.data
                        this.GradeList.forEach((item,index)=>{
                            xAxis.push(item.teacher_name.zh)
                            yAxis1.push(item.leave_count)
                            yAxis2.push(item.leave_day)
                        })
                    }else{
                        this.GradeList=[]
                    }
                    this.total = this.GradeList.length
                    this.option.xAxis[0].data=xAxis
                    this.option.series[0].data=yAxis1
                    this.option.series[1].data=yAxis2
                    this.tableload = false
                }).catch(err => {
                    if (err.code && err.code == 422) {
                        this.$Message.error(err.message);
                    }
                    this.tableload = false
                })
            },
            /************************************************************
            * 选择学期
            ************************************************************/
            formState(val){
                if(val!=null){
                    this.allid = val
                    this.listUrl = `api/leave/v1/leave_statistics/teacher_leave_statistics?semester_id=${val}`
                    this.queryData()
                }
            },
            /************************************************************
            * 查看
            ************************************************************/
            look(row){
                this.title=row.teacher_name.zh?row.teacher_name.zh:row.teacher_name.mn
                this.modal2 = true;
                this.tableloadxq=true
                this.$http.get(`api/leave/v1/leave_statistics/user_details/${row.user_id}?semester_id=${this.allid}`).then((response) => {
                    this.tableloadxq=false
                    this.GradeListxq=response.data
                });
            },
            /************************************************************
            * 关闭
            ************************************************************/
            del () {
                setTimeout(() => {
                    this.modal2 = false;
                }, 500);
            },
            cancel(val){
                if(val == 'time'){
                    this.lookupState = false
                    this.dayloading = false
                }else{
                    this.lookupStates = false
                    this.monloading = false
                }
            },
            /************************************************************
            * 时间处理
            ************************************************************/
            seltime(val){
                this.start_time = val[0]
                this.end_time = val[1]
            },
            /************************************************************
            * 时间处理
            ************************************************************/
            seltimes(val){
                let start = val+'-'+'01'
                let years = val.substring(0,4)
                let mon = val.substring(val.length-2,val.length)
                let end = new Date(years,mon).toJSON().substring(0,10)
                this.start_time = start
                this.end_time = end
            },
            /************************************************************
            * 选择时间段导出数据
            ************************************************************/
            lookupSubmit(){
                this.lookupState = false
                if(this.start_time!='' && this.end_time!=''){
                    this.exportUrl = `api/leave/v1/leave_statistics/all_teacher_out?semester_id=${this.allid}&start_time=${this.start_time}&end_time=${this.end_time}`
                    this.publicexport(this.exportUrl)
                    this.start_time = ''
                    this.end_time = ''
                    this.dayloading=true
                }else{
                    this.dayloading=false
                }
            },
            /************************************************************
            * 选择月份导出数据
            ************************************************************/
            lookupSubmits(){
                this.lookupStates = false
                if(this.start_time!=''){
                    this.exportUrl = `api/leave/v1/leave_statistics/all_teacher_out?semester_id=${this.allid}&start_time=${this.start_time}&end_time=${this.end_time}`
                    this.publicexport(this.exportUrl)
                    this.start_time = ''
                    this.end_time = ''
                }else{
                    this.monloading=true
                }
            },
            exportData(val){
                if(this.allid){
                    if(val == 'all'){
                        this.allloading=true
                        this.exportUrl = `api/leave/v1/leave_statistics/all_teacher_out?semester_id=${this.allid}`
                        this.publicexport(this.exportUrl)
                    }else if(val == 'day'){
                        this.dayloading=true
                        this.lookupState = true
                    }else{
                        this.monloading=true
                        this.lookupStates = true
                    }

                }
            },
            /************************************************************
            * 选择导出数据的公共方法
            ************************************************************/
            publicexport(url){
                this.$http.post(url).then(val => {
                    window.open(val.data.url)
                    this.start_time=''
                    this.end_time=''
                    this.allloading=false
                    this.dayloading=false
                    this.monloading=false
                }).catch(err => {
                    this.allloading=false
                    this.dayloading=false
                    this.monloading=false
                })
            },
        },
}
</script>
